
<html lang='zh-CN'>
<head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <style>
        .preview-suitable-app {
            overflow: visible;
            height: calc(100% - 20px);
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .app-border {
            transform-origin: center;
            position: relative;
            border-radius: 30px 30px 30px 30px;
        }
        .app-border::after {
            content: '';
            position: absolute;
            top: -4px;
            left: -4px;
            width: 100%;
            height: 100%;
            pointer-events: none;
            border: 4px solid rgb(51, 51, 51);
            border-radius: 30px 30px 30px 30px;
        }
        iframe {
            transform-origin: left top;
            border-radius: 26px;
            overflow: hidden;
        }
        .app-border-right {
            position: absolute;
            top: 259px;
            right: -15px;
        }
        .app-border-footer {
            width: 395px;
            height: 38px;
            position: absolute;
            bottom: 8px;
            left: -1px;
            border-radius: 0 0 16px 16px;
        }
        ::-webkit-scrollbar {
            width: 0px;
            background: #f1f1f1;
        }
    </style>
</head>
<body>
    <div id="preview-suitable-content-app" class="preview-suitable-app">
        <div class="app-border" style="width: 393px;height: 852px;transform:scale(0.9002347417840375);">
            <iframe id="iframe" class="vueIframeApp" style="border:none;width: 100%;height: 100%;"></iframe>
        </div>
    </div>
</body>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const html = "<html lang='zh-CN'>\n        <head >\n        <meta charset='UTF-8'/>\n<meta name='viewport' content='width=device-width, initial-scale=1.0'/>\n<title >用户注册</title>\n<script src='https://res.gemcoder.com/js/reload.js'><\/script>\n<script src='https://cdn.tailwindcss.com'><\/script>\n<link rel='stylesheet' href='https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css'/>\n<script >tailwind.config = {\n  theme: {\n    extend: {\n      colors: {\n        primary: '#7B61FF',\n        secondary: '#F0EBFF',\n        dark: '#333333',\n        light: '#F8F9FA',\n        gray: '#9CA3AF'\n      },\n      fontFamily: {\n        sans: ['Inter', 'system-ui', 'sans-serif']\n      }\n    }\n  }\n};<\/script>\n<style type='text/tailwindcss'>\n        @layer utilities {\n            .content-auto {\n                content-visibility: auto;\n            }\n            .bg-gradient-purple {\n                background: linear-gradient(135deg, #7B61FF 0%, #A78BFA 100%);\n            }\n            .input-focus {\n                @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;\n            }\n            .btn-hover {\n                @apply hover:shadow-lg hover:shadow-primary/20 hover:-translate-y-0.5 transition-all duration-300;\n            }\n        }\n    </style>\n    \n        <style>\n            ::-webkit-scrollbar { width: 0px; }\n        </style>\n    </head>\n<body class='bg-secondary min-h-screen font-sans'>\n        <!-- 主内容区 -->\n<div class='container mx-auto px-6 pt-12 pb-20'>\n        <!-- 头像区域 -->\n<div class='flex justify-center mb-10 relative' data-ytextravalue='extra-d3pz0eb6g'>\n        <div class='w-24 h-24 rounded-full overflow-hidden border-4 border-white shadow-lg' data-ytoriginindex='0' data-ytindex='0'>\n        <div >\n        <img src='https://design.gemcoder.com/staticResource/echoAiSystemImages/14ad60a1044735b36b45dbed45bfd34a.png' alt='用户头像' class='w-full h-full object-cover' style data-ytoriginindex='0' data-ytindex='0'/>\n    </div>\n    </div>\n    </div>\n<!-- 表单区域 -->\n<form id='registerForm' class='space-y-6'>\n        <!-- 用户名输入框 -->\n<div class='space-y-2'>\n        <label for='username' class='block text-dark text-sm font-medium'>\n        用户名\n    </label>\n<div class='relative'>\n        <div class='absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray'>\n        <i class='fas fa-user'>\n        </i>\n    </div>\n<input type='text' id='username' name='username' value='kongxunmu' class='w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus bg-white shadow-sm' placeholder='请输入用户名'/>\n    </div>\n    </div>\n<!-- 邮箱输入框 -->\n<div class='space-y-2'>\n        <label for='email' class='block text-dark text-sm font-medium'>\n        邮箱地址\n    </label>\n<div class='relative'>\n        <div class='absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray'>\n        <i class='fas fa-envelope'>\n        </i>\n    </div>\n<input type='email' id='email' name='email' value='120684904@qq.com' class='w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus bg-white shadow-sm' placeholder='请输入邮箱地址'/>\n    </div>\n    </div>\n<!-- 密码输入框 -->\n<div class='space-y-2'>\n        <label for='password' class='block text-dark text-sm font-medium'>\n        账户密码\n    </label>\n<div class='relative'>\n        <div class='absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray'>\n        <i class='fas fa-lock'>\n        </i>\n    </div>\n<input type='password' id='password' name='password' value='••••••••' class='w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 input-focus bg-white shadow-sm' placeholder='请输入密码'/>\n<div class='absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer text-gray' id='togglePassword'>\n        <i class='fas fa-eye-slash'>\n        </i>\n    </div>\n    </div>\n    </div>\n<!-- 注册按钮 -->\n<button type='submit' class='w-full bg-primary text-white font-medium py-3 px-4 rounded-lg shadow-md btn-hover flex items-center justify-center'>\n        <span >\n        注册\n    </span>\n    </button>\n<!-- 登录链接 -->\n<div class='text-center'>\n        <span class='text-dark text-sm'>\n        已有账户？\n    </span>\n<a href='javascript:void(0);' class='text-primary text-sm font-medium ml-1 hover:underline' id='loginLink'>\n        登录\n    </a>\n    </div>\n    </form>\n    </div>\n<script >// 页面加载时初始化\ndocument.addEventListener('DOMContentLoaded', function () {\n  // 密码显示/隐藏切换\n  var togglePassword = document.getElementById('togglePassword');\n  var passwordInput = document.getElementById('password');\n  togglePassword.addEventListener('click', function () {\n    // 切换类型\n    var type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';\n    passwordInput.setAttribute('type', type);\n\n    // 切换图标\n    var icon = togglePassword.querySelector('i');\n    if (type === 'password') {\n      icon.classList.remove('fa-eye');\n      icon.classList.add('fa-eye-slash');\n    } else {\n      icon.classList.remove('fa-eye-slash');\n      icon.classList.add('fa-eye');\n    }\n  });\n\n  // 表单提交处理\n  var registerForm = document.getElementById('registerForm');\n  registerForm.addEventListener('submit', function (e) {\n    e.preventDefault();\n\n    // 获取表单数据\n    var formData = new FormData(registerForm);\n    var userData = Object.fromEntries(formData.entries());\n\n    // 简单表单验证\n    if (!userData.username.trim()) {\n      alert('请输入用户名');\n      return;\n    }\n    if (!userData.email.trim() || !validateEmail(userData.email)) {\n      alert('请输入有效的邮箱地址');\n      return;\n    }\n    if (!userData.password.trim() || userData.password.length < 6) {\n      alert('密码长度不能少于6位');\n      return;\n    }\n\n    // 模拟注册成功\n    alert('注册成功！');\n    // 这里可以添加实际的注册逻辑，如API调用等\n  });\n\n  // 登录链接点击事件\n  var loginLink = document.getElementById('loginLink');\n  loginLink.addEventListener('click', function () {\n    alert('跳转到登录页面');\n    // 这里可以添加跳转到登录页面的逻辑\n  });\n\n  // 邮箱验证函数\n  function validateEmail(email) {\n    var re = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n    return re.test(email);\n  }\n});<\/script>\n    </body>\n    </html>";
        iframe.srcdoc = html;
    });
</script>
</html>
